<template>
  <div class="app-container">
    <div id="data">
      <el-row type="flex" align="middle">
        <el-col :span="3">
          <h3>用例新增日期分布展示</h3>
        </el-col>
        <el-col :span="7">
          <el-date-picker
            v-model="tiem"
            type="daterange"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="起始日期"
            end-placeholder="截至日期"
          >
          </el-date-picker>
        </el-col>

        <el-select
          v-model="createP"
          filterable
          clearable
          placeholder="请选择创建人"
        >
          <el-option
            :clearable="true"
            v-for="(item, i) in optionsCreateP"
            :key="item.name + i"
            :label="item.name"
            :value="item.name"
          >
          </el-option>
        </el-select>

        <el-select
          v-model="valueIt"
          filterable
          clearable
          placeholder="请选择用例类型"
        >
          <el-option
            :clearable="true"
            v-for="item in optionsIt"
            :key="item.type"
            :label="item.type"
            :value="item.type"
          >
          </el-option>
        </el-select>

        <el-button type="primary" size="medium" @click="createDateShowByDate()"
          >搜索</el-button
        >
        <el-button type="primary" size="medium" @click="resetting()"
          >重置</el-button
        >
      </el-row>
      <el-table height="800" :data="list" border>
        <el-table-column
          fixed
          label="序号"
          type="index"
          width="50"
        ></el-table-column>
        <template v-for="(v, i) in this.head">
          <el-table-column
            :key="i + v.prop"
            :prop="v.prop"
            :label="v.label"
            :fixed="v.fixed"
            width="120"
            v-if="v.prop != total"
          >
          </el-table-column>
          <el-table-column
            :key="i + v.prop"
            :fixed="v.fixed"
            :prop="v.prop"
            :label="v.label"
            width="120"
            sortable
            v-else
          >
          </el-table-column>
        </template>
        <!-- <el-table-column prop="creator" label="创建人" width="120">
        </el-table-column>
        <el-table-column prop="weekday" label="星期几" width="120">
        </el-table-column>
        <el-table-column prop="Monday" label="星期一" width="120">
        </el-table-column>
        <el-table-column prop="Tuesday" label="星期二" width="120">
        </el-table-column>
        <el-table-column prop="Wednesday" label="星期三" width="120">
        </el-table-column>
        <el-table-column prop="Thursday" label="星期四" width="120">
        </el-table-column>
        <el-table-column prop="Friday" label="星期五" width="120">
        </el-table-column>
        <el-table-column prop="Saturday" label="星期六" width="120">
        </el-table-column>
        <el-table-column prop="Sunday" label="星期日" width="120">
        </el-table-column> -->
      </el-table>
    </div>
  </div>
</template>

<script>
import * as exec from "@/api/exec";
export default {
  data() {
    return {
      tiem: [],
      head: [],
      list: [],
      total: 0,
      optionsCreateP: [],
      createP: "",
      optionsIt: [],
      valueIt: "",
    };
  },
  methods: {
    resetting() {
      this.tiem = [];
    },
    createDateShow() {
      let h = [];

      h.push({
        prop: "creator",
        label: "创建人",
        fixed: "fixed",
      });

      for (let i = 1; i < 32; i++) {
        h.push({
          prop: i + "",
          label: i + "",
        });
      }

      this.head = h;

      let params = {
        date_create_start: this.tiem[0] || "",
        date_create_end: this.tiem[1] || "",
      };
      exec.createDateShow(params).then((res) => {
        // let arr = [];
        // for (let v of res.data.create_detail_list) {
        //   let d = {
        //     creator: v.creator,
        //   };
        //   for (let dd of v.data_distribute) {
        //     d[dd.date] = dd.num;
        //   }
        //   arr.push(d);
        // }
        // this.list = arr;
        this.list = res.data.data_distribute;
      });
    },
    createDateShowByDate() {
      let params = {
        date_create_start: this.tiem[0] || "",
        date_create_end: this.tiem[1] || "",
        case_type: this.valueIt,
        creator_name: this.createP,
      };
      exec.createDateShowByDate(params).then((res) => {
        let bdl = [];
        let head = [];

        head.push({ prop: "creator", label: "用例创建人", fixed: "fixed" });
        head.push({ prop: "total", label: "用例新增总数", fixed: "fixed" });

        for (let i = 1; i < 32; i++) {
          head.push({ prop: i + "", label: i + "" });
        }
        this.head = head;
        // console.log(this.head);

        for (let v of res.data.data_distribute) {
          let temp = {
            creator: v.creator,
            total: v.total,
          };

          for (let d of v.case_create_data_by_date) {
            temp[d.date] = d.num;
          }

          bdl.push(temp);
          // console.log(bdl);
        }

        this.list = bdl;
        // console.log(this.list);
      });
    },
  },
  created() {
    exec.creatorList().then((res) => {
      this.optionsCreateP = res.data.tester_names;
    });

    setTimeout(() => {
      exec.caseTypeList().then((res) => {
        this.optionsIt = res.data.type_names;
      });
    }, 300);

    setTimeout(() => {
      this.createDateShowByDate();
    }, 3000);
  },
};
</script>

<style scoped>
#sjlx span {
  margin-right: 30px;
}

#sx {
  margin-top: 20px;
}
#sx .el-row {
  margin: 20px 0;
}

#data {
  margin: 20px 20px;
}
</style>
